<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="856px"
    top="0"
    :before-close="cancelBtn"
    :close-on-click-modal="false"
    @open="open"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-position="top"
      class="checkForm"
    >
      <div class="cont_title">个人信息</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="填写真实姓名"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender" size="small">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input
              v-model="formData.idCard"
              placeholder="填写真实姓名身份证号"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-select
                  v-model="birthday.dateYear"
                  placeholder="年"
                  clearable
                  size="small"
                  @change="changeYear"
                >
                  <el-option
                    v-for="(item, index) in yearList"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="birthday.dateMonths"
                  placeholder="月"
                  clearable
                  size="small"
                  @change="changeMonth"
                >
                  <el-option
                    v-for="(item, index) in monthList"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="birthday.dateDay"
                  placeholder="日"
                  clearable
                  size="small"
                  @change="changeDay"
                >
                  <el-option
                    v-for="(item, index) in dayList"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-col>
            </el-row>

          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="籍贯" prop="jiguanProvince">
            <el-select
              v-model="formData.jiguanProvince"
              placeholder="省"
              clearable
              size="small"
              @change="changeProvince(1, $event)"
            >
              <el-option
                v-for="(item, index) in provinceList"
                :key="index"
                :label="item.provinceName"
                :value="item.provinceId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" " prop="jiguanCity" class="no-label">
            <el-select
              v-model="formData.jiguanCity"
              placeholder="市"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in cityList"
                :key="index"
                :label="item.name"
                :value="item.cityId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="民族" prop="nation">
            <el-input
              v-model="formData.nation"
              placeholder="填写民族"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入学年份" prop="startSchoolDate">
            <el-input
              v-model="formData.startSchoolDate"
              placeholder="填写入学年份"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="政治面貌" prop="politicalStatus">
            <el-input
              v-model="formData.politicalStatus"
              placeholder="填写政治面貌"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="填写手机号"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input
              v-model="formData.email"
              placeholder="填写电子邮箱"
              size="small"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="cont_title">学校信息</div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="就读中学" prop="schoolProvince">
            <el-select
              v-model="formData.schoolProvince"
              placeholder="省"
              clearable
              size="small"
              @change="changeProvince(2,$event)"
            >
              <el-option
                v-for="(item, index) in provinceList"
                :key="index"
                :label="item.provinceName"
                :value="item.provinceId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" " prop="schoolCity" class="no-label">
            <el-select
              v-model="formData.schoolCity"
              placeholder="市"
              clearable
              size="small"
              @change="changeCity"
            >
              <el-option
                v-for="(item, index) in schoolCityList"
                :key="index"
                :label="item.name"
                :value="item.cityId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label=" " prop="school" class="no-label">
            <el-select
              v-model="formData.school"
              placeholder="选择就读中学"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in schoolList"
                :key="index"
                :label="item.name"
                :value="item.schoolId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中学联系人" prop="schoolContacts">
            <el-input
              v-model="formData.schoolContacts"
              placeholder="填写中学联系人"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中学联系电话" prop="schoolPhone">
            <el-input
              v-model="formData.schoolPhone"
              placeholder="填写中学联系电话"
              size="small"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="cont_title switch-btn">
        账号状态
        <el-switch
          v-model="userValue"
          active-value="0"
          inactive-value="1"
          active-color="#4D75F3"
          inactive-color="#BCC2CA"
          @change="changeUserStatus"
        >
        </el-switch>
      </div>

      <el-form-item class="btn">
        <el-button type="primary" @click="confirm">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import {GetCheckInfo, GetProvinceList, GetCityList, GetSchool} from "@/api/campSystem/campOper";
  import {UpdateUserInfo, GetUserStatus, UpdateUserStatus} from "@/api/campSystem/userControl";
  import {add0, validateidCard, validatePhone, validateEmail} from "@/utils/validate";

  export default {
    name: "EditUserForm",
    props: {
      dialogVisibleFu: Boolean,
      phoneFu: [Number, String],
      campsiteIdFu: [Number, String],
      typeFu: [Number, String],
      titleFu: [Number, String]
    },
    data() {
      return {
        dialogVisible: this.dialogVisibleFu,
        formData: {},
        rules: {
          name: [
            {required: true, message: '请填写真实姓名', trigger: 'blur'}
          ],
          gender: [
            {required: true, message: '请选择性别', trigger: 'change'}
          ],
          idCard: [
            {required: true, message: '请填写真实姓名身份证号', trigger: 'blur'},
            {validator: validateidCard, trigger: 'blur'}
          ],
          birthday: [
            {required: true, message: '请选择出生日期', trigger: 'blur'}
          ],
          jiguanProvince: [
            {required: true, message: '请选择籍贯省', trigger: 'change'}
          ],
          jiguanCity: [
            {required: true, message: '请选择籍贯城市', trigger: 'change'}
          ],
          nation: [
            {required: true, message: '请填写民族', trigger: 'blur'}
          ],
          startSchoolDate: [
            {required: true, message: '请填写入学年份(高中)', trigger: 'blur'}
          ],
          politicalStatus: [
            {required: true, message: '请填写政治面貌', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请填写手机号', trigger: 'blur'},
            {validator: validatePhone, trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请填写电子邮箱', trigger: 'blur'},
            {validator: validateEmail, trigger: 'blur'}
          ],
          schoolProvince: [
            {required: true, message: '请选择学校省', trigger: 'change'}
          ],
          schoolCity: [
            {required: true, message: '请选择学校城市', trigger: 'change'}
          ],
          school: [
            {required: true, message: '请选择就读中学', trigger: 'change'}
          ],
          schoolContacts: [
            {required: true, message: '请填写中学联系人', trigger: 'blur'}
          ],
          schoolPhone: [
            {required: true, message: '请填写中学联系电话', trigger: 'blur'},
            {validator: validatePhone, trigger: 'blur'}
          ],
        },
        picList: [], // 学习成绩证明材料图片列表
        campsiteId: this.campsiteIdFu,
        type: this.typeFu,
        title: this.titleFu,
        birthday: {
          dateYear: null,
          dateMonths: null,
          dateDay: null
        },
        yearList: [], //出生日期-年列表
        monthList: [], //出生日期-月列表
        dayList: [], //出生日期-日列表
        userValue: '0',// 用户状态 0-正常 1禁用
        provinceList: [],// 省份列表
        cityList: [],// 城市列表
        schoolCityList: [],// 学校城市列表
        schoolList: [],// 学校列表
      };
    },
    methods: {
      open() {
        this.getProvince();
        this.getYear();
        this.getMonth();
        // this.getCheckInfo();
        this.getStatus();
      },
      changeYear(val) {
        this.birthday.dateMonths = null;
        this.birthday.dateDay = null;
        this.dayList = [];
        this.formData.birthday = null;
      },
      changeMonth(val) {
        this.birthday.dateDay = null;
        this.getDay(val);
        this.formData.birthday = null;
      },
      changeDay(val) {
        if (val && val != 0) {
          this.formData.birthday = ''
            + this.birthday.dateYear
            + add0(this.birthday.dateMonths)
            + add0(this.birthday.dateDay);
        } else {
          this.formData.birthday = null;
        }

      },
      // 获取年-月-日列表
      getYear() {
        // 近20年
        let nowDate = new Date();
        let currentYear = nowDate.getFullYear();
        let yearArr = [];
        for (let i = 0; i < 20; i++) {
          let year = currentYear - i;
          yearArr.push(year);
        }
        this.yearList = yearArr;
      },
      getMonth() {
        for (let i = 1; i <= 12; i++) {
          this.monthList.push(i);
        }
      },
      getDay(val) {
        let start = 1, end;
        let arr = [];
        if (val == 2) {
          if (this.birthday.dateYear && this.birthday.dateYear % 4 == 0) {
            end = 29
          } else {
            end = 28;
          }
        } else if (val == (1 || 3 || 5 || 7 || 8 || 10 || 12)) {
          end = 31;
        } else {
          end = 30;
        }
        for (let i = start; i <= end; i++) {
          arr.push(i);
        }
        this.dayList = arr;
      },
      // 改变城市，获取学校列表
      changeCity(value) {
        GetSchool(value).then((res) => {
          console.log(res)
          this.schoolList = res.data;
          this.formData.school = null;
        }).catch(err => {
          console.log(err);
        });
      },
      changeCity2(value) {
        GetSchool(value).then((res) => {
          console.log(res)
          this.schoolList = res.data;
          this.formData.school = Number(this.formData.school);
        }).catch(err => {
          console.log(err);
        });
      },
      // 改变省份，获取城市列表
      changeProvince(type, value) {
        console.log(type, value)
        GetCityList(value + '').then((res) => {
          console.log(res)
          if (res.code != 200) {
            return this.$message.error(res.msg);
          }
          if (type == 1) {
            console.log(type)
            this.cityList = res.data;
            this.formData.jiguanCity = null;
          } else if (type == 2) {
            console.log(type)
            this.schoolCityList = res.data;
            this.schoolList = [];
            this.formData.schoolCity = null;
            this.formData.school = null;
          }
        }).catch(err => {
          console.log(err);
        });
      },
      changeProvince2(type, value) {
        console.log(type, value)
        GetCityList(value + '').then((res) => {
          console.log(res)
          if (res.code != 200) {
            return this.$message.error(res.msg);
          }
          if (type == 1) {
            console.log(type)
            this.cityList = res.data;
          } else if (type == 2) {
            console.log(type)
            this.schoolCityList = res.data;
            this.changeCity2(this.formData.schoolCity)
          }
        }).catch(err => {
          console.log(err);
        });
      },
      // 获取省份列表
      getProvince() {
        GetProvinceList()
          .then(response => {
            console.log(response)
            this.provinceList = response;
            this.getCheckInfo();
          }).catch(err => {
          console.log(err)
        })
      },
      // 获取当前注册用户的详细信息-审核信息
      getCheckInfo() {
        // 获取当前审核资料详情
        GetCheckInfo({
          phone: this.phoneFu,
          campsiteId: this.campsiteId
        })
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              return this.msgError(response.msg);
            }
            this.formData = response.data;
            if (this.formData && this.formData.achievementPath) {
              this.picList = this.formData.achievementPath.split(',');
            }
            if (this.formData && this.formData.birthday) {
              this.birthday['dateYear'] = this.formData.birthday.slice(0, 4);
              this.birthday['dateMonths'] = this.formData.birthday.slice(4, 6);
              this.birthday['dateDay'] = this.formData.birthday.slice(6, 8);
              this.getDay(this.birthday.dateMonths);
            }
            if (this.formData.jiguanProvince) {
              this.changeProvince2(1, this.formData.jiguanProvince)
              this.formData.jiguanCity = Number(this.formData.jiguanCity)
            }
            if (this.formData.schoolProvince) {
              this.changeProvince2(2, this.formData.schoolProvince)
              this.formData.schoolCity = Number(this.formData.schoolCity)
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 获取当前注册用户的状态
      getStatus() {
        GetUserStatus({
          phone: this.phoneFu,
          campsiteId: this.campsiteId
        })
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              return this.msgError(response.msg);
            }
            this.userValue = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 改变注册用户状态 0-正常 1禁用
      changeUserStatus(val) {
        console.log(val);
        let txt = '';
        let status = val;
        if (val == '0') {
          txt = '开启';
          status = '1';
        } else {
          txt = '禁用';
          status = '0';
        }
        console.log(val, status, txt)
        this.$confirm(`确认${txt}该用户?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const obj = {
            phone: this.phoneFu,
            isDisable: val
          }
          UpdateUserStatus(obj)
            .then(response => {
              console.log(response);
              if (response.code != 200) {
                this.userValue = status;
                return this.msgError(response.msg);
              }
              this.msgSuccess(response.msg);
            })
            .catch(error => {
              console.log(error);
              this.userValue = status;
              this.msgError(error)
            });
        }).catch(() => {
          console.log(status);
          this.userValue = status;
          console.log(this.userValue)
          this.msgInfo(`已取消${txt}`)
        });
      },
      // 提交按钮
      confirm() {
        this.$refs['formRef'].validate((valid) => {
          if (!valid) return
          UpdateUserInfo(this.formData)
            .then(response => {
              console.log(response);
              if (response.code != 200) {
                return this.msgError(response.msg);
              }
              this.msgSuccess(response.msg);

              this.dialogVisible = false;
              this.$refs["formRef"].resetFields();
              this.birthday['dateYear'] = null;
              this.birthday['dateMonths'] = null;
              this.birthday['dateDay'] = null;
              this.picList = [];
              this.$emit("closeDialog", this.dialogVisible, true);
            })
            .catch(error => {
              console.log(error);
            });
        })
      },
      // 取消,关闭弹框，修改父组件的值
      cancelBtn() {
        this.dialogVisible = false;
        this.$refs["formRef"].resetFields();
        this.birthday['dateYear'] = null;
        this.birthday['dateMonths'] = null;
        this.birthday['dateDay'] = null;
        this.picList = [];
        this.$emit("closeDialog", this.dialogVisible, false);
      },
    },
    watch: {
      dialogVisibleFu() {
        this.dialogVisible = this.dialogVisibleFu;
      },
      campsiteIdFu() {
        this.campsiteId = this.campsiteIdFu;
      },
      typeFu() {
        this.type = this.typeFu;
      },
      titleFu() {
        this.title = this.titleFu;
      },
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog {
    height: 90%;
    display: flex;
    flex-flow: column;

    .el-dialog__header {
      text-align: center;
      padding: 20px;
    }

    .el-dialog__body {
      padding: 10px 50px 30px;
      flex: 1;
      overflow-y: scroll;
      display: flex;
      flex-flow: column;

      .checkForm {
        flex: 1;

        .cont_title {
          height: 48px;
          line-height: 48px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #12141C;
        }

        .el-form-item {
          margin-bottom: 20px;

          .el-form-item__label {
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #12141C;
          }

          .el-form-item__content {
            height: 40px;
            line-height: 40px;

            .el-input,
            .el-input.is-disabled {
              height: 40px;

              .el-input__inner {
                height: 40px;
                border-radius: 4px;
                border: 1px solid #E1E3E6;
                background-color: #FFFFFF;
                color: #656872;

                &:hover {
                  border-color: #4D75F3;
                }

                &:focus {
                  border-color: #4D75F3;
                }
              }
            }

            .el-radio-group {
              .el-radio {
                .el-radio__label {
                  color: #656872;
                }

                .el-radio__input,
                .el-radio__input.is-disabled {
                  .el-radio__inner {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    border-radius: 50%;
                  }

                  &.is-checked {
                    .el-radio__inner {
                      background: #ffffff !important;
                      border-color: #4D75F3;

                      &::after {
                        width: 7.5px;
                        height: 7.5px;
                        background: #4D75F3 !important;
                      }
                    }
                  }
                }
              }
            }

            .el-select {
              width: 100%;
            }
          }

          &.btn {
            .el-form-item__content {
              text-align: center;
            }
          }

          &.no-label {
            .el-form-item__label::before {
              content: '' !important;
            }
          }
        }
      }
    }

    .switch-btn {
      position: relative;
      margin-bottom: 30px;

      .el-switch {
        position: absolute;
        left: 150px;
        top: 50%;
        transform: translate(0, -50%);
        height: 28px;
        margin: 2px 0;

        .el-switch__core {
          width: 60px !important;
          height: 28px;
          border-radius: 20px;
          line-height: 28px;

          &::after {
            width: 20px;
            height: 20px;
            top: 2.5px;
            left: 2.5px;
          }
        }

        &.is-checked {
          .el-switch__core::after {
            left: 100%;
            margin-left: -22.5px;
          }
        }
      }
    }
  }
</style>


